<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-row class="search-input">
          <el-form-item label="变量名：" prop="sendRefundStatus">
            <el-select v-model="ruleForm.sendRefundStatus" placeholder="全部" style="width:160px">
              <el-option v-for="item in sendRefundStatus" :key="item.code" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="变量符号：" prop="variableSymbol">
            <el-select v-model="ruleForm.variableSymbol" placeholder="全部" style="width:160px">
              <el-option v-for="item in variableSymbol" :key="item.code" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <el-form :inline="true" :model="filters" :size="size">
        <el-row class="search-button right mt20">
          <el-form-item>
            <kt-button icon="fa fa-plus" :label="$t('action.add')" type="primary" @click="handleAdd" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="submitForm('ruleForm')">查询</el-button>
            <el-button size="small" @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-row>
        <!--表格显示列界面-->
        <table-column-filter-dialog
          ref="tableColumnFilterDialog"
          :columns="columns"
          @handleFilterColumns="handleFilterColumns"
        ></table-column-filter-dialog>
      </el-form>
    </div>
    <!--订单异常列表-->
    <el-table :data="pageResult"
              style="width: 100%"
              :stripe="true"
              :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}"
              @selection-change="handleSelectionChange"
              :size="size"
              align="align">
      <el-table-column type="selection" :selectable="selectTable" width="50"></el-table-column>
      <el-table-column prop="variableName" label="变量名" sortable width="300"></el-table-column>
      <el-table-column prop="variableSymbol" label="变量符号" sortable width="300"></el-table-column>
      <el-table-column prop="variableValue" label="变量值" sortable width="300"></el-table-column>
      <el-table-column prop="creatTime" label="创建时间" sortable width="300"></el-table-column>
      <el-table-column prop="status" label="状态" sortable width="300"></el-table-column>
      <el-table-column label="操作" fixed="right" sortable width="300">
        <template slot-scope="scope">
          <el-button>编辑</el-button>
          <el-button>删除</el-button>
          <el-button>操作日志</el-button>
          <el-button v-if="scope.row.remarkStatus == 1" size="mini" type="primary" @click="handleMarkProcessed(scope.row)">标记为已处理</el-button>
          <el-button v-if="scope.row.remarkStatus == 2" size="mini" type="primary" @click="handleMarkPending(scope.row)">标记为待处理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--表格内容栏-->

    <!--新增编辑界面-->
    <el-dialog
      :title="operation?'新增':'编辑'"
      width="40%"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
    >
      <el-form
        :model="dataForm"
        label-width="80px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        label-position="right"
      >
        <el-row class="searchDialog-input">
          <el-form-item label="变量名：" prop="typeId" label-width="110px">
            <el-select
              v-model="dataForm.typeId"
              width="400px"
              :disabled="showType"
              placeholder="变量名："
            >
              <el-option v-for="item in options" :key="item.id" :label="item.val" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="变量符号：" prop="publicnumId" label-width="110px">
            <el-select v-model="dataForm.publicnumId" placeholder="变量符号" @change="changeType">
              <el-option v-for="item in list" :key="item.id+''" :label="item.name" :value="item.id+''"></el-option>
            </el-select>
          </el-form-item>
          条件值：<el-input/>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitForm"
          :loading="editLoading"
        >{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import PopupTreeInput from "@/components/PopupTreeInput";
  import CyTable from "@/views/Core/ProductTable";
  import KtButton from "@/views/Core/KtButton";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import { format } from "@/utils/datetime";
  import { exportExcel } from "@/utils/excel";
  export default {
    components: {
      PopupTreeInput,
      CyTable,
      KtButton,
      TableColumnFilterDialog
    },
    data() {
      return {
        pageResult: [
          {
            variableName:"收货省份",
            variableSymbol:"等于",
            variableValue:"上海",
            creatTime:"2020-10-22 17:44:50",
            status:"停用",
          },{
            variableName:"收货省份",
            variableSymbol:"等于",
            variableValue:"上海",
            creatTime:"2020-10-22 17:44:50",
            status:"停用",
          },{
            variableName:"收货省份",
            variableSymbol:"等于",
            variableValue:"上海",
            creatTime:"2020-10-22 17:44:50",
            status:"停用",
          },{
            variableName:"收货省份",
            variableSymbol:"等于",
            variableValue:"上海",
            creatTime:"2020-10-22 17:44:50",
            status:"停用",
          }
        ],
        totalSize: 0,
        size: "small",
        filters: {},
        list: [],

        columns: [],
        filterColumns: [],
        pageRequest: { pageNum: 1, pageSize: 10 },
        options: [
          { id: "1", val: "联合登录" },
          { id: "2", val: "智能导购" },
          { id: "3", val: "H5" },
          { id: "4", val: "微信公众号" },
          { id: "5", val: "小程序" }
        ],
        operation: false, // true:新增, false:编辑
        dialogVisible: false, // 新增编辑界面是否显示
        editLoading: false,
        showType: false,
        dataFormRules: {
          publicnum_id: [
            { required: true, message: "请选择公众号名称", trigger: "blur" }
          ],
          type_id: [
            { required: true, message: "请选择公众号类型", trigger: "blur" }
          ]
        },
        pageRequest: {pageNum: 1, pageSize: 10},
        totalSize: 0,
        tableProductData: [],                                     // 商品数据
        dialogProductVisible: false,                              // 店铺商品
        logisticsCompanyOptions: [],
        orderStatusOptions: [{value: '1080', label: '换货待处理'}, {value: '1090', label: '换货已收货'}, {value: '1100', label: '换货已发货'}],
        dialogVisible: false,
        dialogFormVisible: false,
        afterSaleTypes: [
          {name: '收货省份', code: 1},
          {name: '收货城市', code: 2},
          {name: '订单金额', code: 3},
          {name: '单商品数量', code: 4}],
        afterSaleStatus: [
          {name: '全部', code: null},
          {name: '申请退款待处理', code: 1010},
          {name: '取消售后', code: 1020},
          {name: '审核通过', code: 1030},
          {name: '审核拒绝', code: 1040},
          {name: '审核后取消售后', code: 1050},
          {name: '退款中', code: 1060},
          {name: '退款成功', code: 1070},
          {name: '换货待处理', code: 1080},
          {name: '换货已收货', code: 1090},
          {name: '换货已发货', code: 1100}],// 1010:申请退款待处理1020:取消售后1030:审核通过1040:审核拒绝1050:审核后取消售后1060:退款中1070:退款成功],
        sendBackStatus: [{name: '全部', code: null}, {name: '待寄回', code: 1}, {name: '已寄回', code: 2}],
        sendBackTypes: [{name: '全部', code: null}, {name: '上门取件', code: 1}, {name: '快递寄回', code: 2}],
        sendRefundStatus: [{name: '全部', code: null}, {name: '收货省份', code: 1}, {name: '收货城市', code: 2}, {name: '订单金额', code: 2}, {name: '单商品数量', code: 2}, {name: '收货人姓名', code: 2}, {name: '订单备注', code: 2}],
        variableSymbol: [{name: '全部', code: null}, {name: '等于', code: 1}, {name: '不等于', code: 2}, {name: '大于小于', code: 2}, {name: '包含', code: 2}, {name: '不为空', code: 2}],
        sendSourceChannel: [{name: '全部', code: null}, {name: 'APP', code: 1}, {name: '商城小程序', code: 2}, {name: '企业微信', code: 3}, {name: 'We2000公众号', code: 4}, {name: '商城公众号', code: 5}, {name: '其他', code: 6}],
        sendActivitySources: [{name: '全部', code: null}, {name: '拼团', code: 1}, {name: '秒杀', code: 2}, {name: '预售', code: 3}, {name: '抽奖', code: 4}],
        sendPayType: [{name: '全部', code: null}, {name: '微众分期', code: 1}, {name: 'We2000', code: 2}, {name: '微信', code: 3}, {name: '微众银行储蓄卡', code: 4}],
        sendProvince: [{name: '上海', code: null}],
        sendCity: [{name: '上海', code: null}],
        sendCounty: [{name: '上海', code: null}],
        ruleForm: {
          afterSaleNo: null,
          afterSaleType: null,
          status: null,
          sendBackStatus: null,
          sendRefundStatus: null,
          sendSourceChannel: null,
          sendActivitySources: null,
          sendPayType: null,
          sendBackType: null,
          orderNo: null,

          returnNumber: null,
          merchantId: null,
          storeName: null,
          applyTimeStart: null,
          applyTimeEnd: null,
          afterSalesCompletionTimeStart: null,
          afterSalesCompletionTimeEnd: null,
          limit: 10,
          start: 1
        },
        // 新增编辑界面数据
        dataForm: {
          publicnum_id: "",
          typeId: ""
        }
      };
    },
    methods: {
      // 获取分页数据
      // findPage: function(data) {
      //   this.filters.t = "PublicNumberType";
      //   this.$refs.CyTable.findPage(this.filters);
      // },

      changeType: function(value) {
        this.$set(this.dataForm, this.dataForm.publicnumId, value);
      },
      findPage: function() {
        let this_ = this;
        if (this_.filters == undefined || this_.filters == null) {
          this_.filters = {};
        }
        this_.filters.start = this.pageRequest.pageNum;
        this_.filters.limit = this.pageRequest.pageSize;
        this.utils.request.queryPublicNumType(this_.filters, function(res) {
          if (res.data.rows == null) {
            res.data.rows = [];
          }
          this_.pageResult = res.data.rows;

          this_.totalSize = Number(res.data.total);
        });
      },
      // 批量删除
      handleDelete: function(data) {
        let param = {};
        param.id = data.params[0].id;
        this.utils.request.deletePublicnumType(param, data.callback);
      },
      // 显示新增界面
      handleAdd: function() {
        this.dialogVisible = true;
        this.operation = true;
        this.showType = false;
        this.dataForm = {};
      },
      //列表下载
      downloadExcel() {
        this.$confirm("确定下载列表文件?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let filename = "微信公众号配置";
            this.$refs.CyTable.exportData(
              this.filters,
              this.filterColumns,
              filename
            );
          })
          .catch(() => {});
      },
      // 显示编辑界面
      handleEdit: function(params) {
        this.showType = true;
        this.dialogVisible = true;
        this.operation = false;
        this.dataForm = Object.assign({}, params.row);

        this.dataForm.publicnumId = params.row.publicnumId;
      },
      // 编辑
      submitForm: function() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.editLoading = true;
            let params = Object.assign({}, this.dataForm);
            params.token = localStorage.getItem("token");
            this.utils.request.editPublicNumType(params, this.editInfoBack);
          }
        });
      },

      // 新增修改回调
      editInfoBack: function(data) {
        if (data.code == "0000") {
          this.$message({ message: "操作成功", type: "success" });
          this.dialogVisible = false;
          this.$refs["dataForm"].resetFields();
        } else {
          this.$message({ message: "操作失败, " + data.msg, type: "error" });
        }
        this.findPage();
        this.dialogVisible = false;
        this.operation = false;
        this.editLoading = false;
      },
      // 时间格式化
      dateFormat: function(row, column, cellValue, index) {
        return format(row[column.property]);
      },
      // 处理表格列过滤显示
      displayFilterColumnsDialog: function() {
        this.$refs.tableColumnFilterDialog.setDialogVisible(true);
      },
      // 处理表格列过滤显示
      handleFilterColumns: function(data) {
        this.filterColumns = data.filterColumns;
        this.$refs.tableColumnFilterDialog.setDialogVisible(false);
      },
      // 处理表格列过滤显示
      initColumns: function() {
        this.columns = [
          {
            prop: "typeId",
            label: "公众号类型",
            minWidth: 120,
            formatter: function(row, column, cellValue, index) {
              if (cellValue == 1) {
                return "联合登录";
              } else if (cellValue == 2) {
                return "智能导购";
              } else if (cellValue == 3) {
                return "H5";
              } else if (cellValue == 4) {
                return "微信公众号";
              } else if (cellValue == 5) {
                return "小程序";
              }
            }
          },
          { prop: "name", label: "名称", minWidth: 120 },
          { prop: "appid", label: "AppId", minWidth: 120 },
          { prop: "appsecret", label: "AppSecret", minWidth: 120 },
          { prop: "createTime", label: "创建时间", minWidth: 120 }
          // {prop:"lastUpdateTime", label:"更新时间", minWidth:120, formatter:this.dateFormat}
        ];
        var temp = [];
        $.each(this.columns, function(key, val) {
          temp.push(val);
        });
        this.filterColumns = temp;
      },
      resetForm(formName) {
        this.findPage({ t: "PublicNumberType" });
      },
      //公众号名称初始化
      queryUserList(data) {
        var that = this;
        this.utils.request.queryWxPublicNum(data, function(data) {
          that.list = data.data.rows;
        });
      }
      //   //公众号类型初始化
      // queryUser
      //
      // 1(data) {
      //   var that = this;
      //   this.utils.request.queryUserList(data, function(data) {
      //     that.options = data.data;
      //   });
      // },
    },

    mounted() {
      this.initColumns();
      this.queryUserList();
    }
  };
</script>

<style lang='scss' scoped>
  .right{
    text-align: right !important;
  }
</style>
